<template>
  <el-row class="cons">
    <el-col :span="18">
      <el-row style="background: #3b8cf4">
        <el-col :offset="0" style="margin-left: 2.5vw">
          <el-menu
            :default-active="activeIndex2"
            lass="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            text-color="#B9B9B9"
            active-text-color="#2A2A2A"
            style="font-weight: bold; letter-spacing: 2px"
          >
          </el-menu>
        </el-col>
      </el-row>
    </el-col>

    <el-col :span="6" class="login_status">
      <a
        class="name_text"
        target="_blank"
        href="http://wpa.qq.com/msgrd?v=3&uin=2175899561&site=qq&menu=yes"
      >
        在线客服
      </a>
      <span @click="goProfile" class="name_text">{{ nickName }}</span>
      <span class="name_text" @click="signOut">退出登录</span>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      /*userinfo得信息*/
      username: null,
      nickName: null,
      isVip: 0,
      vip: null,
      url: {
        currentUser: "/web/user/currentUser",
      },
    };
  },
  mounted() {
    // 从本地取userInfo得数据
    if (localStorage.getItem("username")) {
      this.username = localStorage.getItem("username");
      this.nickName = localStorage.getItem("nickName");
    }
  },
  created() {
    this.currentUser();
  },
  methods: {
    async currentUser() {
      let res = await this.$http.get(this.url.currentUser);
      if (res.data.code != 200) {
        this.$message.warning(res.data.message);
        this.$router.push({ path: "/" });
      }
      // this.isVip = res.data.result.user.isVip
      // this.vip = res.data.result.vip
    },

    goProfile() {
      let token = localStorage.getItem("token");
      // window.open(
      //   token
      // );
    },
    handleSelect(key, keyPath) {
      if (key == 2) {
        this.$router.push({
          name: "member",
        });
      }
    },
    login() {
      this.$router.push({
        name: "Login",
      });
    },
    signOut() {
      // 清除所有缓存
      localStorage.clear();
      this.$router.push({ path: "/" });
    },
  },
};
</script>

<style lang="scss">
// .el-menu--horizontal > .el-submenu {
//   padding-top: 3vh;
//   height: 9vh;
//   line-height: 12vh;
// }
// .el-menu--horizontal > .el-menu-item {
//   height: 12vh;
//   line-height: 12vh;
// }

.header {
  height: 4vh !important;
}
.cons {
  position: relative;
  background-color: #3b8cf4;
  height: 2vh;

  .el-menu {
    background-color: #3b8cf4;
  }

  .menu_clolor {
    margin-top: -1.8vh;
    color: #fff !important;
  }

  .login_status {
    position: absolute;
    right: -360px;
    height: 100%;
    line-height: 5.4vh;

    .name_text {
      cursor: pointer;
      font-size: 20px !important;
      color: #fff;
      margin-right: 20px;
    }
  }
}
.loginBtn {
  // margin-top: -1.4vh;

  // button {
  //   width: 75%;
  //   height: 4.5vh;
  //   border-radius: 2.5vh;
  //   margin-top: 3.75vh;
  //   // padding-right: 3.75vh;
  //   font-weight: bold;
  //   font-size: 19px;
  //   background-color: #1ac7b6;
  // }
}
</style>
